import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Input, Button } from 'element-react'
import Select from '../base/Select'
import Breadcrumb from '../base/Breadcrumb'
import DatePicker from '../base/DatePicker'
import Pagination from '../base/Pagination'
import './order.css'

class orderManage extends Component {
  constructor (props, context) {
    super (props, context)
    this.state = {
      aa: [],
      orderListData: [],
      // 总条数
      total: 0,
      pageNo: 0,
      orderNum: '',
      userNum: '',
      //--------
      nowChooseSort: '',
      startTime: '',
      endTime: '',
      orderTypeList: [
        {
          label: '创建订单，等待付款',
          value: 1,
        },
        {
          label: '取消订单（已付款）',
          value: 2,
        },
        {
          label: '取消订单（未付款）',
          value: 3,
        },
        {
          label: '待发货',
          value: 4,
        },
        {
          label: '待收货',
          value: 5,
        },
        {
          label: '待发货(缺货)',
          value: 6,
        },
        {
          label: '完成',
          value: 7,
        },
        {
          label: '已关闭（未付款）',
          value: 8,
        }
      ]
    }
  }
  oneType (val) {
    this.setState({nowChooseSort: val})
  }
  look (obj) {
    let orderInfo = JSON.stringify({orderId: obj.id, userId: obj.userId, userName: obj.userName})
    localStorage.setItem('orderInfo', orderInfo)
    this.props.history.push({
      pathname: `/orderDetail/orderManage`
    })
  }
  getTime (begin, end) {
    this.setState(
      {
        startTime: begin,
        endTime: end
      }
    )
  }
  changePage (currentPage) {
    this.setState({
      pageNo: currentPage - 1
    }, () => {
      this.getOrderList()
    })
  }
  search () {
    this.setState({
      pageNo: 0
    }, () => {
      this.getOrderList()
    })
  }
  componentDidMount () {
    this.getOrderList()
  }
  getOrderList () {
    let data = {
      id: this.state.orderNum,
      userId: this.state.userNum,
      status: this.state.nowChooseSort,
      startTime: this.state.startTime,
      endTime: this.state.endTime,
      pageNo: this.state.pageNo,
      size: 10
    }
    this.$ajax.queryAllOrder(data).then(res => {
      if (res.code === 200) {
        this.setState({
          total: res.data.totalElements,
          orderListData: res.data.content
        })
      }
    })
  }
  render () {
    return (
      <div className="order-module">
        <Breadcrumb data={['订单', '订单管理列表']}/>
        <div className="search-item">
          <div className="condition-item">
            <label htmlFor="orderNum">订单ID</label>
            <Input id="orderNum" placeholder="请输入订单编号" size="small" className="inputSmall" onChange={value => {this.setState({orderNum: value})}}/>
          </div>
          <div className="condition-item">
          <label htmlFor="userNum">用户ID</label>
          <Input id="userNum" placeholder="请输入订单编号" size="small" className="inputSmall" onChange={value => {this.setState({userNum: value})}}/>
        </div>
          <div className="condition-item">
            <label>订单状态</label>
            <Select options={this.state.orderTypeList} select={this.oneType.bind(this)}/>
          </div>
          <div className="condition-item">
            <label>创建时间</label>
            <DatePicker getTime={this.getTime.bind(this)}/>
          </div>
          <div>
            <button type="button" className="btn btn-search" onClick={this.search.bind(this)}>搜索</button>
          </div>
        </div>
        <div>
          <table className="table">
            <tbody>
            <tr>
              <th>订单ID</th>
              <th>用户ID</th>
              <th>订单价格</th>
              <th>订单状态</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
            {
              this.state.orderListData.length > 0 ? this.state.orderListData.map((a, index) => {
                return (
                    <tr key={index}>
                      <td>{a.id}</td>
                      <td>{a.userId}</td>
                      <td>{a.price}</td>
                      <td>
                        {a.status === 1 ? '创建订单，等待付款' : ''}
                        {a.status === 2 ? '取消订单（已付款）' : ''}
                        {a.status === 3 ? '取消订单（未付款）' : ''}
                        {a.status === 4 ? '待发货' : ''}
                        {a.status === 5 ? '待收货' : ''}
                        {a.status === 6 ? '待发货(缺货)' : ''}
                        {a.status === 7 ? '完成' : ''}
                        {a.status === 8 ? '已关闭（未付款）' : ''}
                      </td>
                      <td>{a.createTime}</td>
                      <td>
                        <Button type="info" size="small" onClick={this.look.bind(this, a)}>查看</Button>
                      </td>
                    </tr>
                )
              }) : <tr><td colSpan={6}>暂无数据</td></tr>
            }
            </tbody>
          </table>
        </div>
        <Pagination total={this.state.total} changePage={this.changePage.bind(this)}/>
      </div>
    )
  }
}

export default withRouter(orderManage)
